<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color switcher!</title>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap");

        * {
            font-family: "Roboto", sans-serif;
            padding: 0;
            margin: 0;
        }

        body {
            background-image: url("https://itu.edu/wp-content/uploads/2020/09/gradient-background-02.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            background-image: url("https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/12/Gradient_builder_2.jpg?auto=format&q=60&w=1815&h=1361.25&fit=crop&crop=faces");
            background-size: cover;
            border-radius: 15px;
            padding: 50px 50px 20px 50px;
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
        }

        label {
            display: block;
            font-size: 20px;
            margin-bottom: 5px;
        }

        p {
            margin-bottom: 5px;
        }

        input {
            display: block;
            margin-bottom: 25px;
        }

        input[type="text"] {
            padding: 10px 10px;
            border: none;
            border-radius: 10px;
        }

        .box {
            height: 70px;
            width: 100%;
            background: rgb(7, 104, 143);
            margin-bottom: 25px;
            border-radius: 10px;
        }

        .toggle {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .toggleText {
            font-size: 18px;
        }

        #toggleBtn {
            padding: 5px;
            margin: 0 10px;
            background-color: gray;
            width: 60px;
            height: 30px;
            border-radius: 30px;
            cursor: pointer;
        }

        #innerCirlce {
            background-color: white;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            transition: all 250ms;
        }

        .toggle-btn.toggled>.inner-circle {
            background-color: #333 !important;
            transform: translateX(30px);
            transition: 250ms;
        }

        .unselected {
            opacity: 0.5;
            transition: 0.25s;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 class="ttile">Lighten / Darken color!</h1>
        <label for="hex">Color (Hex): </label>
        <input type="text" name="hex" id="hexInput" placeholder="#000000" />

        <div class="toggle">
            <p id="lightenText" class="toggleText">Lighten</p>
            <div id="toggleBtn" class="toggle-btn">
                <div id="innerCirlce" class="inner-circle"></div>
            </div>
            <p id="darkenText" class="toggleText">Darken</p>
        </div>

        <label for="slider" id="sliderText">0%</label>
        <input type="range" min="0" max="100" value="0" name="slider" id="sliderEl" class="sliderEl" />
        <p>Input color:</p>
        <div id="inputColor" class="box"></div>
        <p id="alteredColorText">Altered color:</p>
        <div id="alteredColor" class="box"></div>
    </div>
    <script>
        const rgb = {
            r: "",
            g: "",
            b: "",
        };

        let hexChars = [
            "#",
            "0",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "A",
            "B",
            "C",
            "D",
            "E",
            "F",
        ];

        let hexIn = document.querySelector("#hexInput");
        let baseClr = document.querySelector("#inputColor");
        let newClr = document.querySelector("#alteredColor");
        let newClrTxt = document.querySelector("#alteredColorText");
        let sliderText = document.querySelector("#sliderText");
        let sliderEl = document.querySelector("#sliderEl");
        let darkText = document.querySelector("#darkenText");
        let lightText = document.querySelector("#lightenText");
        let toggleBtn = document.querySelector("#toggleBtn");

        toggleBtn.addEventListener("click", () => {
            toggleBtn.classList.toggle("toggled");
            if (toggleBtn.className === "toggle-btn toggled") {
                lightText.classList.add("unselected");
                darkText.classList.remove("unselected");
            } else {
                darkText.classList.add("unselected");
                lightText.classList.remove("unselected");
            }
            sliderEl.value = 0;
            renderColors();
        });

        sliderEl.addEventListener("input", () => {
            renderColors();
        });

        hexIn.addEventListener("keyup", () => {
            renderColors();
        });

        const renderColors = () => {
            const hex = hexIn.value;
            const perct = sliderEl.value;
            sliderText.textContent = `${sliderEl.value}%`;
            if (!isValidHex(hex)) return;
            baseClr.style.backgroundColor = "#" + hex;
            newClr.style.backgroundColor = "#" + hex;
            hex2rgb(hex);
            const sign = toggleBtn.classList.contains("toggled") ? -perct : perct;
            const upHex = alterColor(hex, sign);
            newClrTxt.textContent = `Altered color: ${upHex.toUpperCase()}`;
        };

        const isValidHex = (str) => {
            str = str.toUpperCase();
            // let ln = str.length;

            for (let i = 0; i < str.length; i++) {
                // let temp = str.charAt(i);
                if (!hexChars.includes(str[i])) {
                    return false;
                }
            }
            if (str.charAt(0) === "#") {
                str = str.replace("#", "");
                if (str.length === 3 || str.length === 6) {
                    return true;
                }
            }
            return str;
        };

        const hex2rgb = (hex) => {
            if (!isValidHex(hex)) return null;
            if (hex.length === 3) {
                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
            }

            rgb.r = parseInt(hex.slice(0, 2), 16);
            rgb.g = parseInt(hex.slice(2, 4), 16);
            rgb.b = parseInt(hex.slice(4, 6), 16);
        };

        const rgb2hex = () => {
            let hr = ("0" + rgb.r.toString(16)).slice(-2);
            let hg = ("0" + rgb.g.toString(16)).slice(-2);
            let hb = ("0" + rgb.b.toString(16)).slice(-2);
            let hex = "#" + hr + hg + hb;
            newClr.style.backgroundColor = hex;
            return hex;
        };

        const alterColor = (hex, percentage) => {
            hex2rgb(hex);

            const perAmt = Math.floor((percentage / 100) * 255);
            rgb.r = validIncr(rgb.r, perAmt);
            rgb.g = validIncr(rgb.g, perAmt);
            rgb.b = validIncr(rgb.b, perAmt);
            const newHex = rgb2hex();
            return newHex;
        };

        const validIncr = (val, amt) => {
            // const newVal = val + amt;
            // if (newVal > 255) return 255;
            // if (newVal < 0) return 0;
            // return newVal;

            return Math.min(255, Math.max(0, val + amt));
        };

    </script>
</body>

</html>